<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
        <meta name="author" content="Coderthemes">

        <link rel="shortcut icon" href="bootstrap/images/favicon_1.ico">

        <title>OCP - Responsive Admin 首页 Template</title>


        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
        <link href="bootstrap/css/core.css" rel="stylesheet" type="text/css">
        <link href="bootstrap/css/icons.css" rel="stylesheet" type="text/css">
        <link href="bootstrap/css/components.css" rel="stylesheet" type="text/css">
        <link href="bootstrap/css/pages.css" rel="stylesheet" type="text/css">
        <link href="bootstrap/css/menu.css" rel="stylesheet" type="text/css">
        <link href="bootstrap/css/responsive.css" rel="stylesheet" type="text/css">

        <script src="bootstrap/js/modernizr.min.js"></script>

        <!-- bootstrap table css -->
        <link href="bootstrap/table/bootstrap-table.min.css" rel="stylesheet" type="text/css">

    </head>


    <body class="fixed-left">

        <!-- Begin page -->
        <div id="wrapper">

            <!-- Top Bar Start -->
            <div th:replace="~{fragment :: topbar_menu}">
            </div>
            <!-- Top Bar End -->


            <!-- ========== Left Sidebar Start ========== -->
            <div th:replace="~{fragment :: leftbar_menu(4)}" >
            </div>
            <!-- Left Sidebar End -->


            <!-- ============================================================== -->
            <!-- Start right Content here -->
            <!-- ============================================================== -->
            <div class="content-page">
                <!-- Start content -->
                <div class="content">
                    <div class="container">

                        <!-- Page-Title -->
                        <div class="row">
                            <div class="col-sm-12">
                                <ol class="breadcrumb pull-right">
                                    <li>
                                        <a href="#">OCP</a>
                                    </li>
                                    <li class="active">经销商管理</li>
                                </ol>
                            </div>
                        </div>

                        <form class="form-inline" style="margin-bottom: 20px">
                            <div class="form-group">
                                <label for="ename">姓名:</label>
                                <input type="ename" class="form-control" id="ename" placeholder="员工姓名">
                            </div>
                            <div class="form-group">
                                <label for="job"> 邮箱:</label>
                                <input type="job" class="form-control" id="job" placeholder="员工职位">
                            </div>
                            <div class="form-group">
                                <label for="dno"> 电话:</label>
                                <input type="dno" class="form-control" id="dno" placeholder="所属部门">
                            </div>

                            <button type="submit" class="btn btn-primary">查询</button>
                        </form>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">经销商列表</h3>
                                    </div>
                                    <div class="panel-body">
                                        <div class="row">
                                            <table id="agentTable"></table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> <!-- End Row -->
                    </div> <!-- container -->

                </div> <!-- content -->

                <footer class="footer text-right">
                    2015 © OCP.
                </footer>

            </div>
            <!-- ============================================================== -->
            <!-- End Right content here -->
            <!-- ============================================================== -->

        </div>
        <!-- END wrapper -->


        <script>
            var resizefunc = [];
        </script>


        <!-- jQuery  -->
        <script src="bootstrap/js/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script src="bootstrap/js/detect.js"></script>
        <script src="bootstrap/js/fastclick.js"></script>
        <script src="bootstrap/js/jquery.slimscroll.js"></script>
        <script src="bootstrap/js/jquery.blockUI.js"></script>
        <script src="bootstrap/js/waves.js"></script>
        <script src="bootstrap/js/wow.min.js"></script>
        <script src="bootstrap/js/jquery.nicescroll.js"></script>
        <script src="bootstrap/js/jquery.scrollTo.min.js"></script>

        <script src="bootstrap/js/jquery.app.js"></script>

        <!-- bootstrap table js -->
        <script src="bootstrap/table/bootstrap-table.min.js"></script>
        <script src="bootstrap/table/bootstrap-table-zh-CN.min.js"></script>

        <script>
            $(function () {
                $('#agentTable').bootstrapTable({
                    url: 'emp/getEmps',
                    method: 'get',
                    cache: false,
                    pagination: true,
                    pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
                    pageSize: 10,                     //每页的记录行数（*）
                    pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                    sidePagination: 'server',
                    clickToSelect: true,
                    uniqueId: "empno",
                    columns: [
                        {checkbox: true, visible: true},                  //是否显示复选框
                        {field: 'empno', title: '员工编号'},
                        {field: 'ename', title: '员工姓名'},
                        {field: 'job', title: '职位名称'},
                        {field: 'mgr', title: '上级编号'},
                        {field: 'hiredate', title: '入职时间'},
                        {field: 'sal', title: '员工工资'},
                        {field: 'comm', title: '绩效奖金'},
                        {field: 'department.dname', title: '所属部门'},
                        {field: 'empno', title: '操作',
                            formatter: function(value, row, index){
                                return '<a><button type="button" class="btn btn-success" data-toggle="modal" data-target="#query_emp_model"><span class="glyphicon glyphicon-search"></span>详情</button></a>&nbsp;&nbsp;' +
                                       '<a><button type="button" class="btn btn-warning" data-toggle="modal" data-target="#update_emp_model"><span class="glyphicon glyphicon-pencil"></span>编辑</button></a>&nbsp;&nbsp;' +
                                       '<a><button type="button" class="btn btn-danger" data-toggle="modal" data-target="#delete_emp_model"><span class="glyphicon glyphicon-remove"></span>删除</button></a>';
                            }
                        }
                    ],
                    queryParams: function (params) {
                        //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
                        params = {
                            pageSize: params.limit,                         //页面大小
                            pageNum: (params.offset / params.limit) + 1,   //页码
                        };
                        return params;
                    }
                });
            });
        </script>
        <div th:replace="~{fragment :: #query_emp_model}"></div>
        <div th:replace="~{fragment :: #update_emp_model}"></div>
        <div th:replace="~{fragment :: #delete_emp_model}"></div>
    </body>
</html>